<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="贾文清">
    <title></title>
    <style>
        body {
            margin: 0;
            background: lightgray;
        }

        main {
            width: 400px;
            height: 750px;
            margin: 30px auto;
        }

        .top {
            width: 400px;
            height: 500px;
            border: 5px solid white;
            background-color: white;
            position: relative;
        }

        .bottom {
            width: 400px;
            height: 230px;
            background-color: white;
            position: relative;
            margin-top: 10px;
            display: flex;
            justify-content: space-around;
        }

        .top img {
            width: 380px;
            height: 380px;
            position: relative;
            left: 10px;
            top: 10px;
        }

        .top div {
            width: 350px;
            height: 80px;
            margin: 20px auto;
            font-size: 13px;
            text-indent: 2em;
        }
        .top aside{
            width: 100%;
            height: 100%;
            border: 5px solid orange;
            position: absolute;
            top:-5px;
            left:-5px;
            display: none;
        }

        .bottom>div {
            width: 170px;
            height: 170px;
            margin-top: 28px;
        }

        .bottom>div img {
            width: 100%;
            height: 100%;
        }

        .left {
            position: relative;
            overflow: hidden;
        }
        

        .bottom .cover {
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0;
            position: absolute;
            top: 0;

        }

        .bottom .text {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: -170px;
        }

        .bottom .text p {
            z-index: 100;
            color: white;
            font-size: 13px;
            margin-top: 30px;
            text-align: center;
        }
    </style>
</head>

<body>
    <main>
        <section class="top">
            <img src="./33.jpg" alt="">
            <div>
                <span>
                    【今熹】运用了多片层叠设计，形成立体倒放的花苞视<br>觉效果,创意独特。
                浓烈的印花明快的色彩勾勒出美妙的夏日<br>异国情调,优质雪纺面料让小衫
                更显质感穿着凉爽透气，做工<br>也相当考究。
                </span>
            </div>
            <aside class="ceng"></aside>
        </section>
        <section class="bottom">
            <div class="left">
                <img src="./22.jpg" alt="">
                <div class="cover"></div>
                <div class="text">
                    <p>special品牌旗舰店</p>
                    <p>
                        最具偿还期烂漫色彩的欧<br> 洲经典设计，给那带来
                        <br> 专属的魅力。
                    </p>
                </div>
            </div>
            <div class="left">
                <img src="./11.jpg" alt="">
                <div class="cover"></div>
                <div class="text">
                    <p>special品牌旗舰店</p>
                    <p>
                        最具偿还期烂漫色彩的欧<br> 洲经典设计，给那带来
                        <br> 专属的魅力。
                    </p>
                </div>
            </div>
        </section>
    </main>
    <script src="./jquery.js"></script>
</body>

</html>
<script>
    $('.top').hover(function(){
        $(this).find('aside').stop().fadeIn(1000);
    },function(){
         $(this).find('aside').stop().fadeOut(1000);;
    });
    
    $('.left').hover(function () {
        $(this).find('.cover').fadeTo(1000,0.5);
        $(this).find('.text').stop().animate({ left: 0 }, 500);
    }, function () {
         $(this).find('.cover').fadeTo(1000,0);
         $(this).find('.text').stop().animate({ left: -170 }, 500);
    });

</script>